import React, { useEffect } from 'react';
import { Row, Col } from 'antd';
import LazyLoad from 'react-lazyload';
import { ReactSVG } from 'react-svg';

const Content = ({ dataSource, isMobile, ...props }) => {
  useEffect(() => {
  },[])
  const {
    wrapper,
    img,
    title,
    content,
    OverPack: overPackData,
    subtitle,
  } = dataSource;
  return (
    <LazyLoad>
      <div {...wrapper}>
        <div className='c-grid-layout'>
          <div className='content7-center'>
            <div className={title.className}><p>{title.children}</p></div>
            <div className={subtitle.className}><p>{subtitle.children}</p></div>
            <div className={content.className}>
              <div className='content7-flex'>
                <Row gutter={[20,20]}>
                  { content.children.map((i,key) => 
                    <Col key={key} xs={24} md={12}>
                      <div key={key} className='item' style={{backgroundImage: "url("+ i.backgroundImage + ")"}}>
                        {!isMobile && <div className='title'><span>{i.title}</span></div>}
                        <div className='img-box'>
                          <ReactSVG 
                            className='footer-icon'
                            src={i.icon}
                          />
                          {isMobile && <span className='icon-title'>{i.title}</span>}
                        </div>
                        <div className='subtitle'><span className='text'>{i.subtitle}</span></div>
                      </div>
                    </Col>
                  )}
                </Row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </LazyLoad>
  );
}

export default Content;
